<template>
  <div class="task-box">
    <el-card v-for="(item,index) in taskList" class="task-box-item">
      <el-row align="middle" type="flex">
        <el-col :span="9">
          <el-row>
            <el-col>
              <div class="task-title">
                <span>任务：</span>
                <span>{{item.title}}</span>
              </div>
            </el-col>
            <el-col>
              <div class="task-sutitle">
                <span>目标：</span>
                <span>{{item.subtitle}}</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <div>{{!item.is_loop?'一次性任务':'多次任务'}}</div>
        </el-col>
        <el-col :span="6">
          <div class="task-earn">
            <span>奖励：</span>
            <span style="color:red;font-weight: 700;">{{item.integral}}</span>
            <span>积分</span>
            <span style="margin-left:3px;color:red;font-weight: 700;">{{item.exp}}</span>
            <span>成长值</span>
          </div>
        </el-col>

        <el-col :span="2">
          <div :style="item.status_value?'color:#32cd32;':''">{{item.status_value?'任务完成':'未完成'}}</div>
        </el-col>
        <el-col :span="3">
          <el-button
            style="float:right;"
            type="warning"
            round
            size="small"
            @click="handleTask(index)"
          >去做任务</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog title="复制推广" :visible.sync="shareDialogVisible" width="40%" top="20vh">
      <el-form style="margin-top:30px;">
        <el-input v-model="data" autocomplete="off" type="textarea" :rows="4"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="float:left;font-size:14px;height:32px;line-height:32px;">提示：成功推广一位玩家即可获取一次任务积分。</span>
        <el-button type="primary" @click="handleShare" size="small">立即复制推广</el-button>
      </div>
    </el-dialog>
    <!--  -->
    <el-dialog title="请填写您的邮箱" :visible.sync="emailDialogVisible" width="40%" top="20vh">
      <el-form style="margin-top:30px;">
        <el-form-item label="邮箱：" label-width="60px">
          <el-input v-model="data" autocomplete="off" size="small" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="float:left;">提示：邮箱填写保存后不能再修改！</span>
        <el-button @click="emailDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave" size="small">保 存</el-button>
      </div>
    </el-dialog>
    <!--  -->
    <el-dialog title="请填写您的支付宝" :visible.sync="alipayDialogVisible" width="40%" top="20vh">
      <el-form style="margin-top:30px;">
        <el-form-item label="支付宝：" label-width="70px">
          <el-input v-model="data" autocomplete="off" size="small" placeholder="请输入支付宝"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="float:left;">提示：支付宝填写保存后不能再修改！</span>
        <el-button @click="alipayDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave" size="small">保 存</el-button>
      </div>
    </el-dialog>
    <!--  -->
    <el-dialog title="请上传您的头像" :visible.sync="avatarDialogVisible" width="40%" top="20vh">
      <div style="margin-top:30px;">
        <el-upload
          style="display: table; margin: 0 auto;"
          list-type="picture-card"
          :limit="1"
          :action="$http.defaults.baseURL+'/upload/image'"
          :headers="headers"
          :on-error="handleUploadError"
          :on-success="handleUploadSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="avatarDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave" size="small">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import uitls from "@/modules/set";
export default {
  data() {
    return {
      currentTaskIndex: -1,
      emailDialogVisible: false,
      alipayDialogVisible: false,
      avatarDialogVisible: false,
      shareDialogVisible: false,
      data: "",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("higame-token")
      },
      taskList: []
    };
  },
  methods: {
    doTask(task, data) {
      this.$http
        .post("/integral/handletask", {
          task_id: task.task_id,
          data: data
        })
        .then(res => {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.emailDialogVisible = false;
          this.alipayDialogVisible = false;
          this.avatarDialogVisible = false;
          this.shareDialogVisible = false;
          task.status_value = true;
          this.$store.dispatch("user_check");
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleTask(index) {
      this.data = "";
      this.currentTaskIndex = index;
      let task = this.taskList[index];
      if (task.task_name == "BIND_EMAIL") {
        this.emailDialogVisible = true;
      } else if (task.task_name == "BIND_ALIPAY") {
        this.alipayDialogVisible = true;
      } else if (task.task_name == "UPLOAD_AVATAR") {
        this.avatarDialogVisible = true;
      } else if (task.task_name == "SHARE") {
        this.$http
          .post("/integral/handletask", {
            task_id: task.task_id
          })
          .then(res => {
            this.data = res.data.replace("[downURL]", this.$higame.downURL);

            this.shareDialogVisible = true;
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else {
        this.doTask(task, this.data);
      }
    },
    handleSave() {
      let task = this.taskList[this.currentTaskIndex];
      this.doTask(task, this.data);
    },
    handleUploadError(err, file, fileList) {
      this.$message.error(err.toString());
    },
    handleUploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.data = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleShare() {
      uitls.copy(this.data);
      this.$message({
        message: "复制成功，可以推广了！",
        type: "success"
      });
    }
  },
  created() {
    this.$http
      .post("/integral/gettasks", {})
      .then(res => {
        this.taskList = res.data.list;
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
    
  }
};
</script>
<style scoped>
.task-box {
  margin: 30px 30px;
}
.task-box-item {
  margin-bottom: 20px;
  box-shadow: none;
}
.task-title {
  font-weight: 700;
  height: 30px;
  line-height: 30px;
}
.task-sutitle {
  color: #999;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
.task-earn {
  color: #999;
  height: 30px;
  line-height: 30px;
}
.task-btn {
  float: right;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0px solid transparent;
  outline: none;
  text-align: center;
  background-color: #74c632;
  font-size: 14px;
  font-family: "Microsoft Yahei", sans-serif;
  width: 100px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.task-btn:hover {
  background-color: #64d806;
}

.task-btn:active {
  background-color: #7dc741;
}
</style>
